<template>
  <div
    ref="wrap_ref"
    class="wrap"
    :class="[addClass, getSizeClass]"
    @mouseenter="krpanoPanoramaEnter"
    @mouseleave="krpanoPanoramaLeave"
  >
    <div
      ref="earthContainer"
      @click.stop="fullScreen($event)"
      style="width: 100%; height: 100%; position: relative"
    />
    <video-action-bar
      v-if="fullScreenComp !== 0 && fullScreenComp !== 4"
      v-show="!hideMap"
      :show-refresh="false"
      @hideScreen="hideScreen"
    />
    <!-- 全景三维多期选择栏 -->
    <!-- <div id="qjlist" class="qjlist">
      <div class="box" v-for="(item, index) in qjlist">
        <div @click="openQj(item)">
          {{ index + 1 }}. {{ item.date | formateDate(index) }}
        </div>
      </div>
      <div class="box">
        <div @click="removeTileset()">退出</div>
      </div>
    </div> -->
    <div id="qjlist" class="issueInfotips">
      <div v-if="currentMarkName" class="issueInfotipsBox">
        <div class="issue_title">
          {{ currentMarkName }}
        </div>
        <div class="content" v-if="!qishu">
          <div
            class="box"
            @click="openQj(item)"
            v-for="(item, index) in qjlist"
            :key="index"
          >
            <span>{{ item.date | formateDate(index) }}</span>
            <span>第{{ index + 1 }}期</span>
            <span><i class="el-icon-link"></i></span>
          </div>
        </div>
        <div class="content2" v-if="qishu">
          <span>更新时间:{{ qj_update_time }}</span>
          <span>{{ qishu }}期</span>
        </div>
        <div class="box" v-if="!qishu">
          <div @click="removeTileset(qjlist)">退出</div>
          <div @click="removeAllTileset()">全部退出</div>
        </div>
        <div class="arrowpoint"></div>
      </div>
    </div>
    <!-- 全景三维多期选择栏 -->
    <div id="summary" class="nest-pop summary">
      <div style="color: aqua">
        {{ NestSum ? NestSum.nest_name : "暂无信息" }}
      </div>
      <div class="pop-inner-info">
        <div class="info-item">
          <span>飞行架次</span><span>:</span
          ><span>{{ NestSum ? NestSum.flight_sorties : "" }}</span>
        </div>
        <div class="info-item">
          <span>总事件</span><span>:</span
          ><span>{{ NestSum ? NestSum.total_event : "" }}</span>
        </div>
        <div class="info-item">
          <span>上报事件</span><span>:</span
          ><span>{{ NestSum ? NestSum.submit_event : "" }}</span>
        </div>
        <div class="info-item">
          <span>受理事件</span><span>:</span
          ><span>{{ NestSum ? NestSum.acceptance_event : "" }}</span>
        </div>
      </div>
    </div>
    <!-- 机巢小窗 -->
    <div id="small_window" class="nest-pop">
      <div class="pop-inner">
        <div class="pop-inner-close" @click="closeNestWindow"></div>
        <div class="pop-inner-title">
          <span>{{ currentNest.nest_name }}</span>
        </div>
        <div class="pop-inner-video" ref="ref_wrap1">
          <div id="nestVideo" style="height: 100%; width: 100%"></div>
        </div>
        <div class="pop-inner-info">
          <div class="info-item">
            <span>基站状态</span><span>:</span
            ><span>{{ NestInfo | nestConnectedFilter }}</span
            ><span></span>
          </div>
          <div class="info-item">
            <span>无人机电量</span><span>:</span
            ><span>{{ NestInfo ? NestInfo.quantity * 100 + "%" : "暂无" }}</span
            ><span></span>
          </div>
        </div>
        <div class="pop-inner-btn" @click="openNest">打开机巢详情页</div>
      </div>
    </div>

    <svg-icon
      v-if="hideMap"
      icon-class="map_blue"
      class="icon_map"
      @click="showScreen()"
    />

    <div
      v-if="fullScreenComp === 4"
      ref="closePanorama"
      class="closePanorama"
      @click="closePanoramaButton"
    >
      返回地图
    </div>
  </div>
</template>

<script>
import { getDeptNestList } from "@/api/kanban";
import VideoActionBar from "@/views/components/NestAndAircraftSubComps/baseComps/VideoActionBar";
// import { QNRTPlayer } from "qn-rtplayer-web";

// window.tileset = null;
window.tilesetList = [];
// window.mymap = null;
window.mymapList = [];
let lastQjMark; // 上一个全景地标

// 1 创建Earth的vue组件
var EarthComp = {
  props: {
    fullScreenComp: {
      type: Number,
      default: () => 0,
    },
    isShowAircraftComp: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    VideoActionBar,
  },
  filters: {
    formateDate(date, index) {
      if (date) {
        var a = date.split(" ")[0] + " 期";
      } else {
        var a = index + 1 + " 期";
      }
      return a;
    },
    nestConnectedFilter(info) {
      if (info) {
        if (info.state == "flying") {
          return "飞行中";
        } else if (info.state == "offline") {
          return "离线";
        } else {
          return "在线";
        }
      }
      return "暂无";
    },
  },
  data() {
    return {
      hideMap: false,
      message: "页面加载 " + new Date().toLocaleString(),
      _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
      _bgImagery: undefined,
      list: [],
      marklist: [],
      flyplanflag: false,
      MarkData: [],
      videoShow: false,
      isFullScreen: true,
      styleType: "0",
      qjlist: [], // 全景列表
      qjIssueList: [], // 全景内问题列表
      if3D2D: "2D", // 是否为  3D  2D
      currentNest: {
        nest_name: null,
      },
      player: null,
      playerType: 0,
      intervalTask: null,
      NestInfo: "",
      NestSum: "",
      clickPos: null,
      pickFlag: false,
      workFlag: false,
      isPanoramaMouse: false, // 全景鼠标是否在地图上
      if3D2D: "2d", // 是否为2D 3D
      currentMarkName: null, // 当前hover的全景三维的名称
      currentMarkId: null, // 当前hover的全景三维的id
      qishu: null, //全景期数
      qj_update_time: null, //全景更新时间

      userAuthor: null,
    };
  },
  computed: {
    // 项目专题权限显示
    project_topic_query_auth() {
      return this.userAuthor?.project_topic?.query?.have_auth;
    },
    // 飞行监控权限显示
    flight_monitor_query_auth() {
      return this.userAuthor?.flight_monitor?.query?.have_auth;
    },
    addClass() {
      // return 'wrap_full'
      switch (this.fullScreenComp) {
        case 0:
          return "wrap_full";
        case 1:
          return this.isShowAircraftComp
            ? "replace_nest_video"
            : "replace_nest_video2";
        case 2:
          return this.isShowAircraftComp
            ? "replace_aircraft_video"
            : "replace_aircraft_video2";
        case 3:
          return this.isShowAircraftComp
            ? "replace_nest_inside_video"
            : "replace_nest_inside_video2";
        case 4:
          this.$refs.wrap_ref.style.width = "200px";
          this.$refs.wrap_ref.style.height = "100px";
          return "krpanoPanorama";
      }
    },
    getSizeClass() {
      if (this.hideMap && this.fullScreenComp !== 0) {
        return "hide_map";
      }
    },
  },
  created() {
    this.userAuthor = this.$store.getters.userAuth;
    var _this = this;
    _this.$bus.on("AllNestActiveStatus", (data) => {
      if (NestLayer) {
        if (data.type == "zaixian") {
          data.list.forEach((item) => {
            var radar = NestLayer.entities.getById(item.nest_code + "_epllise");
            if (radar) {
              if (data.switchzaixian) {
                radar.show = true;
              } else {
                radar.show = false;
              }
            }
          });
        }
        if (data.type == "gongzuo") {
          data.list.forEach((item) => {
            var radar = NestLayer.entities.getById(item.nest_code + "_epllise");
            if (radar) {
              if (data.switchgongzuo) {
                radar.show = true;
              } else {
                radar.show = false;
              }
            }
          });
        }
        if (data.type == "lixian") {
          data.list.forEach((item) => {
            var radar = NestLayer.entities.getById(item.nest_code + "_epllise");
            if (radar) {
              if (data.switchlixian) {
                radar.show = true;
              } else {
                radar.show = false;
              }
            }
          });
        }
        if (data.type == "weibao") {
          data.list.forEach((item) => {
            var radar = NestLayer.entities.getById(item.nest_code + "_epllise");
            if (radar) {
              if (data.switchweibao) {
                radar.show = true;
              } else {
                radar.show = false;
              }
            }
          });
        }
        if (data.type == "yichang") {
          data.list.forEach((item) => {
            var radar = NestLayer.entities.getById(item.nest_code + "_epllise");
            if (radar) {
              if (data.switchyichang) {
                radar.show = true;
              } else {
                radar.show = false;
              }
            }
          });
        }
      }
    });
  },
  // 1.1 资源创建
  mounted() {
    this.initData();
    this.initBus();
  },
  methods: {
    initData() {
      if (typeof Cesium !== "undefined") {
        this.createCesium(this);
      }
    },
    initBus() {
      // 重置视角
      this.$bus.on("EarthResetView", (data) => {
        console.log(44);
        this.ResetView();
      });
      // 打开机巢窗口
      this.$bus.on("OpenNestWindow", (data) => {
        this.openNestWindow(data);
      });
      // 搜图pick 状态
      this.$bus.on("ChangePickFlag", (data) => {
        console.log("pickvalue " + data);
        this.pickFlag = data;
        if (!data) {
          this.closeNestWindow();
        }
      });
      this.$bus.on("changeWorkFlag", (flag) => {
        this.workFlag = flag;
      });

      // 关闭全景
      this.$bus.on("closeQj", (data) => {
        this.closePanorama();
      });

      // 切换全景
      this.$bus.on("changeQj", (data) => {
        this.openQj(data);
      });
    },
    openNest() {
      this.closeNestWindow();
      this.$bus.emit("closeIconScaleLayer");
      if (!this.currentNest.flight_aircraft_code) {
        this.$message.warning("该机巢尚未绑定飞机");
        return;
      }
      // 关闭指点飞行
      this.$emit("openNest", this.currentNest);
      this.$bus.emit("bottomButtonShow", false);
    },
    openQj(item) {
      if (!this.project_topic_query_auth) {
        this.$message.warning("无项目专题权限");
        return;
      }
      console.log("openQj", item);
      var htmlOverlay = document.getElementById("qjlist");
      htmlOverlay.style.display = "none";
      // ! 打开全景
      if (item.type && item.type === "qj") {
        // 打开全景第一层 判断 1 2
        // 中心点
        var centerPoint = turf.point([item.position[0], item.position[1]]);
        // 球状范围
        var options = {
          steps: 10,
          units: "kilometers",
          properties: { foo: "bar" },
        };
        var polygon = turf.circle(centerPoint, 3, options);
        var QjList = this.$store.getters.quanjings;
        // 判断是否在范围内
        this.qjlist = [];
        // 判断全景点
        QjList.forEach((e) => {
          if (e.mark_id === item.mark_id) {
            this.$bus.emit("qjListIndex", e.mark_id);
          }
          let point = turf.point([e.position[0], e.position[1]]);
          let isIncluded = turf.booleanPointInPolygon(point, polygon);
          if (isIncluded) {
            // 去重
            let item = this.qjlist.find((a) => {
              return e.mark_id === a.mark_id;
            });
            if (!item) {
              this.qjlist.push(e);
            }
          }
        });
        // 判断问题点
        var issueOptions = {
          steps: 10,
          units: "kilometers",
          properties: { foo: "bar" },
        };
        var issuePolygon = turf.circle(centerPoint, 1, issueOptions);
        this.qjIssueList = [];
        this.$parent.issueList.forEach((issue) => {
          let point = turf.point([issue.location[1], issue.location[2]]);
          let isIncluded = turf.booleanPointInPolygon(point, issuePolygon);
          if (isIncluded) {
            // 去重
            let item = this.qjIssueList.find((a) => {
              return issue.issue_code === a.issue_code;
            });
            if (!item) {
              this.qjIssueList.push(issue);
            }
          }
        });
        this.$emit("openQj", this.qjlist, this.qjIssueList, item.position);

        // 隐藏气泡
        this.$bus.emit("toggleNestLayer", false); // bottomkanban
        this.$bus.emit("toggleIssueLayer", false); // bottomkanban

        // 变更全景
        this.$bus.emit("changePanorama", item.scenes);
        // 地图缩小
        this.$refs.wrap_ref.style.width = "200px";
        this.$refs.wrap_ref.style.height = "100px";
        this.$bus.emit("closePanoramaText", false);

        const hpr_2d = new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(0.0),
          Cesium.Math.toRadians(-90.0),
          5000.0
        );
        viewer.camera.lookAt(
          Cesium.Cartesian3.fromDegrees(item.position[0], item.position[1]),
          hpr_2d
        );
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
      } else if (item["3d"]) {
        // 清除地图和数组中同期的三维模型
        for (let i = 0; i < tilesetList.length; i++) {
          if (tilesetList[i].markId === this.currentMarkId) {
            viewer.scene.primitives.remove(tilesetList[i]);
            tilesetList.splice(i, 1); // 删除元素
            break; // 找到并删除后可以退出循环
          }
        }
        const tileset = new Cesium.Cesium3DTileset({
          url: item["3d"],
          maximumScreenSpaceError: item["space_error"]
            ? item["space_error"]
            : 16,
          maximumMemoryUsage: 1024,
          skipLevelOfDetail: true,
        });
        tileset.markId = this.currentMarkId;
        tilesetList.push(tileset);
        viewer.scene.primitives.add(tileset);
        tileset.readyPromise.then(function (argument) {
          // 防止被地形干扰,设置向上偏移8米
          // const heightOffset = 8.0;
          // const boundingSphere = tileset.boundingSphere;
          // console.log(boundingSphere)
          // const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
          // const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
          // const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
          // const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
          // tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

          viewer.scene.globe.depthTestAgainstTerrain = false;

          viewer.flyTo(tileset, {
            offset: new Cesium.HeadingPitchRange(
              0,
              Cesium.Math.toRadians(-45.0),
              1000
            ),
          });
        });
      } else if (item["2d"]) {
        console.log(item["2d"]);
        // 清除地图和数组中同期的正射
        for (let i = 0; i < mymapList.length; i++) {
          if (mymapList[i].markId === this.currentMarkId) {
            viewer.imageryLayers.remove(mymapList[i]);
            mymapList.splice(i, 1); // 删除元素
            break; // 找到并删除后可以退出循环
          }
        }
        console.log(item);
        this.$bus.emit("getToolData", item);
        CesiumUtil.AddMyMap(item["2d"]).then((res) => {
          res.markId = this.currentMarkId;
          mymapList.push(res);
          // mymap = res;
        });
      }
    },
    removeTileset() {
      switch (this.if3D2D) {
        case "2d":
          for (let i = 0; i < mymapList.length; i++) {
            if (mymapList[i].markId === this.currentMarkId) {
              viewer.imageryLayers.remove(mymapList[i]);
              mymapList.splice(i, 1); // 删除元素
              break; // 找到并删除后可以退出循环
            }
          }
          break;
        case "3d":
          for (let i = 0; i < tilesetList.length; i++) {
            if (tilesetList[i].markId === this.currentMarkId) {
              viewer.scene.primitives.remove(tilesetList[i]);
              tilesetList.splice(i, 1); // 删除元素
              break; // 找到并删除后可以退出循环
            }
          }
          break;
        default:
          break;
      }
    },
    removeAllTileset() {
      this.$bus.emit("exitTool");
      console.log(this.if3D2D);
      switch (this.if3D2D) {
        case "2d":
          if (mymapList.length > 0) {
            mymapList.forEach((item) => {
              viewer.imageryLayers.remove(item);
            });
          }
          break;
        case "3d":
          if (tilesetList.length > 0) {
            tilesetList.forEach((item) => {
              viewer.scene.primitives.remove(item);
            });
          }
          break;
        default:
          break;
      }
      // viewer.scene.globe.depthTestAgainstTerrain = true;
    },
    createCesium(comp) {
      var _this = this;
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YzUxNDUzYS0zNmExLTRmOGYtODhkYS1mMWZiNjExMTQ1ZDAiLCJpZCI6NTk2OSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NDgwMzUxMn0.FxhENFWc0f_yTWC3gdTK8Qqo_MIq-Q5a2zjyj5nYmuo";

      var token = "a6a4651c01e36192542d51da6033bb71";
      // 服务域名
      var tdtUrl = "https://t{s}.tianditu.gov.cn/";
      // 服务负载子域
      var subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];

      var TDT_IMG_C =
        tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token;
      var TDT_CIA_C =
        tdtUrl + "DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + token;
      window.viewer = new Cesium.Viewer(comp.$refs.earthContainer, {
        baseLayerPicker: false,
        geocoder: false,
        homeButton: false,
        timeline: false,
        navigationHelpButton: false,
        animation: false,
        shadows: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        fullscreenButton: false,
        useBrowserRecommendedResolution: true,
        orderIndependentTranslucency: true,
        contextOptions: {
          webgl: {
            alpha: true,
          },
        },
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: TDT_IMG_C,
          subdomains: subdomains,
          tilingScheme: new Cesium.WebMercatorTilingScheme(),
          maximumLevel: 18,
        }),
      });

      // viewer.scene.debugShowFramesPerSecond = true;
      //开启地形深度检测 防止坐标拾取出错
      viewer.scene.globe.depthTestAgainstTerrain = true;

      // 禁用双击事件
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );

      CesiumUtil.InitMap();
      // 地形
      var terrainLayer = new Cesium.CesiumTerrainProvider({
        url: "https://model.guihuao.com/20231027wkl01/", //90精度103\109、115
      });

      viewer.terrainProvider = terrainLayer;
      // 地形夸张
      // viewer.scene.globe.terrainExaggeration = 1.1;

      //初始视角
      CesiumUtil.ZoomToElementByGPS({
        longitude: 118.7,
        latitude: 28.74,
        height: 10,
        distance: 175000,
      });
      // 地图路网与地名
      var cialayer = new Cesium.UrlTemplateImageryProvider({
        url: TDT_CIA_C,
        subdomains: subdomains,
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 17,
      });
      window.CiaTxtLayer = viewer.imageryLayers.addImageryProvider(cialayer);

      // 地块边界
      window.RoiLayer = CesiumUtil.CreateLayer("RoiLayer");
      var region = comp.$store.getters.kanBanBlock.region;
      if (region) {
        for (let i = 0; i < region.length; i++) {
          let area = JSON.parse(region[i]["ar_area"]);
          CesiumUtil.LoadCityROI(area, RoiLayer);
        }
      }
      var lands = comp.$store.getters.kanBanBlock.land;
      if (lands) {
        for (let i = 0; i < lands.length; i++) {
          let area = JSON.parse(lands[i]["landmark_area"]);
          CesiumUtil.LoadCityROI(area, RoiLayer);
        }
      }

      //创建图层
      window.NestLayer = CesiumUtil.CreateLayer("NestLayer");
      window.QuestionLayer = CesiumUtil.CreateLayer("QuestionLayer");
      window.AirlineLayer = CesiumUtil.CreateLayer("AirlineLayer");
      window.QuanjingPointLayer = CesiumUtil.CreateLayer("QuanjingPointLayer"); //全景的时候返回只有一个点
      window.TempLayer = CesiumUtil.CreateLayer("TempLayer");
      window.SignalLayer = CesiumUtil.CreateLayer("SignalLayer");

      window.TempPLayer = new Cesium.PrimitiveCollection();
      window.billboardsCollection = null;
      window.labelCollection = null;
      window.issueCollection = null;
      window.myPrimitive = null;
      window.nowQJMarkLayer = CesiumUtil.CreateLayer("nowQJMarkLayer");

      window.WINLayerList = [];
      window.WinLayerListNew = [];
      window.WINLayerList.push(
        NestLayer,
        QuestionLayer,
        AirlineLayer,
        QuanjingPointLayer,
        TempLayer,
        TempPLayer,
        billboardsCollection,
        labelCollection,
        issueCollection,
        myPrimitive
      );
      viewer.scene.primitives.add(TempPLayer);
      comp.fetchData();

      //地图点击事件
      var htmlOverlay2 = document.getElementById("small_window");

      var handler2 = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler2.setInputAction(function (CLICK) {
        var obj = CesiumUtil.LeftClick(CLICK);
        console.log("clicklObj", obj);
        console.log(
          viewer.scene.globe.ellipsoid.cartesianToCartographic(
            viewer.camera.position
          ).height
        );
        //点击元素
        if (obj.pick) {
          //判断obj.pick.id是不是Entity类型，
          //这里当我们点击的是普通图层的话，obj.pick.id就是entity类型
          //如果点击的是高性能图层，obj.pick.id就是string类型,为polygon的父文件夹名称#polygon名称#楼层（中心路#62号#1层)
          if (obj.pick.id instanceof Cesium.Entity) {
            console.log("entity11:", obj.pick.id);
            if (obj.pick.id.type === "issue") {
              var arr = obj.pick.id.id.split("issue_");
              var code = arr[1];
              console.log(code);
              _this.$bus.emit("setIssueIdMark", {
                code: code,
                id: obj.pick.id._id,
                position: obj.pick.id._position._value,
              });
            } else {
              var name = obj.pick.id.name;
              var code = obj.pick.id.id;
              if (code && obj.pick.id.type == "nest") {
                console.log("openNest");
                comp.openNestWindow(obj.pick.id);
              } else if (obj.pick.id.name == "管辖区域") {
                comp.closeNestWindow();
              }
            }
          } else {
            var name = obj.pick.id;
            if (name) {
              var arr = name.split("_");
              var code = arr[1];
              var type = arr[1];
              if (arr[0] == "issue") {
                _this.$bus.emit("setIssueId", {
                  code: code,
                  id: obj.pick.id,
                  position: obj.pick.primitive._position,
                  imageId: obj.pick.primitive._imageId,
                });
              }
              if (type === "qj") {
                if (!_this.project_topic_query_auth) {
                  _this.$message.warning("无项目专题权限");
                  return;
                }
                var pickedFeature = obj.pick;
                console.log("pickedFeature", pickedFeature);
                if (Cesium.defined(pickedFeature)) {
                  if (
                    pickedFeature.id != undefined &&
                    pickedFeature.id &&
                    typeof pickedFeature.id === "string"
                  ) {
                    var name = pickedFeature.id;
                    var arr = name.split("_");
                    var code = arr[0];
                    var type = arr[1];
                    if (type == "qj") {
                      var cartographic = Cesium.Cartographic.fromCartesian(
                        pickedFeature.primitive.position
                      );
                      var currentClickLon = Cesium.Math.toDegrees(
                        cartographic.longitude
                      );
                      var currentClickLat = Cesium.Math.toDegrees(
                        cartographic.latitude
                      );
                      let cartographic_ = Cesium.Cartographic.fromDegrees(
                        currentClickLon,
                        currentClickLat
                      );
                      let height = viewer.scene.globe.getHeight(cartographic_);
                      var newpoint = Cesium.Cartesian3.fromDegrees(
                        currentClickLon,
                        currentClickLat,
                        height
                      );
                      // var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(cartesian)
                      var canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(newpoint);
                      if (Cesium.defined(canvasPosition)) {
                        if (type == "qj") {
                          var items = comp.$store.getters.quanjings;
                          var scenes = items.find((item) => {
                            return item.mark_id + "_qj" === name;
                          });
                          comp.openQj(scenes);
                        }

                        comp.$bus.emit("getQjMark", scenes.mark_id);

                        // 缩小上一个全景地标
                        //   var icon_ = require('@/assets/icons/quanjing.png')
                        //   var icon_select = require('@/assets/icons/xuanzhongquanjing.png')
                        // if(lastQjMark !== pickedFeature ){
                        //   if(lastQjMark){
                        //     lastQjMark.primitive.scale = 0.8
                        //     lastQjMark.primitive.image = icon_
                        //   }
                        //   pickedFeature.primitive.scale = 1.0
                        //   pickedFeature.primitive.image = icon_select
                        //   lastQjMark = obj.pick
                        // }
                        // htmlOverlay.style.top = canvasPosition.y - 10 + "px";
                        // htmlOverlay.style.left = canvasPosition.x + "px";
                        // htmlOverlay.style.display = "block";
                      }
                      return false;
                    } else if (
                      pickedFeature.id.type != undefined &&
                      pickedFeature.id.type == "epllise"
                    ) {
                      var code = pickedFeature.id.id;
                      code = code.split("_")[0];
                      const nestList = comp.$store.getters.nestSum;

                      var sumn = nestList.filter((item) => {
                        return item.nest_code === code;
                      })[0];
                      if (sumn) {
                        comp.list.map((res, index) => {
                          if (res.nest_code == code) {
                            sumn["nest_name"] = res.nest_name;
                          }
                        });
                        comp.NestSum = sumn;
                      } else {
                        comp.NestSum = null;
                      }
                      var canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(
                          pickedFeature.id.position._value
                        );
                      if (Cesium.defined(canvasPosition)) {
                        htmlOverlay3.style.top = canvasPosition.y + 10 + "px";
                        htmlOverlay3.style.left = canvasPosition.x + "px";
                        htmlOverlay3.style.display = "block";
                      }
                      return false;
                    }
                  }
                }
              }
              // console.log(name);
            }

            comp.closeNestWindow();
          }
        } else {
          comp.closeNestWindow();
        }
        // 搜图拾取坐标逻辑
        if (comp.pickFlag) {
          comp.$bus.emit("EndPickFlag", obj);
        }

        if (comp.workFlag) {
          comp.$bus.emit("endWorkFlag", obj);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 鼠标hover显示我多期

      var htmlOverlay = document.getElementById("qjlist");
      var htmlOverlay3 = document.getElementById("summary");
      handler2.setInputAction(function (movement) {
        if (!movement) {
          return false;
        }
        var pickedFeature = viewer.scene.pick(movement.endPosition);
        var cartesian = viewer.scene.pickPosition(movement.endPosition);
        if (Cesium.defined(pickedFeature)) {
          if (
            pickedFeature.id != undefined &&
            pickedFeature.id &&
            typeof pickedFeature.id === "string"
          ) {
            var name = pickedFeature.id;
            var arr = name.split("_");
            var code = arr[0];
            var type = arr[1];
            if (arr.length > 2) var if3D2D = arr[2];
            if (type == "sw" || type == "qj") {
              var cartographic = Cesium.Cartographic.fromCartesian(
                pickedFeature.primitive.position
              );
              var currentClickLon = Cesium.Math.toDegrees(
                cartographic.longitude
              );
              var currentClickLat = Cesium.Math.toDegrees(
                cartographic.latitude
              );
              let cartographic_ = Cesium.Cartographic.fromDegrees(
                currentClickLon,
                currentClickLat
              );
              let height = viewer.scene.globe.getHeight(cartographic_);
              var newpoint = Cesium.Cartesian3.fromDegrees(
                currentClickLon,
                currentClickLat,
                height
              );
              var canvasPosition =
                viewer.scene.cartesianToCanvasCoordinates(newpoint);
              if (Cesium.defined(canvasPosition)) {
                if (type == "sw") {
                  var items = comp.$store.getters.sanweis;
                  var mark_item = items.filter((item) => {
                    return item.mark_id + "_sw_" + if3D2D === name;
                  })[0];
                  var scenes = mark_item["scenes"];
                  comp.currentMarkName = mark_item["name"];
                  comp.currentMarkId = mark_item.mark_id;
                  comp.qishu = null;
                } else if (type == "qj") {
                  var items = comp.$store.getters.quanjings;
                  var mark_item = items.filter((item) => {
                    return item.mark_id + "_qj" === name;
                  })[0];
                  console.log(mark_item);
                  var scenes = [];
                  var lens = mark_item["scenes"].length;
                  comp.qishu = lens;
                  comp.qj_update_time = mark_item["scenes"][lens - 1]["date"];
                  comp.currentMarkName = mark_item["name"];
                }

                comp.if3D2D = if3D2D;
                comp.qjlist = scenes;

                console.log(htmlOverlay.offsetHeight);
                if (comp.qishu != null) {
                  htmlOverlay.style.top = canvasPosition.y - 150 + "px";
                } else {
                  if (scenes.length > 3)
                    htmlOverlay.style.top = canvasPosition.y - 240 + "px";
                  else if (scenes.length > 2)
                    htmlOverlay.style.top = canvasPosition.y - 210 + "px";
                  else if (scenes.length > 1)
                    htmlOverlay.style.top = canvasPosition.y - 190 + "px";
                  else htmlOverlay.style.top = canvasPosition.y - 160 + "px";
                }
                htmlOverlay.style.left = canvasPosition.x - 160 + "px";
                htmlOverlay.style.display = "block";
              }
              return false;
            } else if (type == "qj") {
              // console.log(window.quanjingDataSource);
              // console.log(window.quanjingDataSource.billboard);
            } else if (
              pickedFeature.id.type != undefined &&
              pickedFeature.id.type == "epllise"
            ) {
              var code = pickedFeature.id.id;
              code = code.split("_")[0];
              const nestList = comp.$store.getters.nestSum;

              var sumn = nestList.filter((item) => {
                return item.nest_code === code;
              })[0];
              if (sumn) {
                comp.list.map((res, index) => {
                  if (res.nest_code == code) {
                    sumn["nest_name"] = res.nest_name;
                  }
                });
                comp.NestSum = sumn;
              } else {
                comp.NestSum = null;
              }
              var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
                pickedFeature.id.position._value
              );
              if (Cesium.defined(canvasPosition)) {
                htmlOverlay3.style.top = canvasPosition.y + 10 + "px";
                htmlOverlay3.style.left = canvasPosition.x + "px";
                htmlOverlay3.style.display = "block";
              }
              return false;
            }
          }
        }

        htmlOverlay.style.display = "none";
        htmlOverlay3.style.display = "none";
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      var scratch = new Cesium.Cartesian2();
      viewer.scene.preRender.addEventListener(function () {
        var position = comp.clickPos;
        if (position) {
          var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
            position,
            scratch
          );
          if (Cesium.defined(canvasPosition)) {
            if (!comp.flight_monitor_query_auth) return;
            htmlOverlay2.style.top = canvasPosition.y + "px";
            htmlOverlay2.style.left = canvasPosition.x + "px";
          }
        }
      });
    },
    openNestWindow(entity) {
      if (this.$parent.isShowNestInfo) {
        return false; // 处于机巢详情界面时，不允许查看地图中的其他机巢
      }
      var htmlOverlay2 = document.getElementById("small_window");
      this.clickPos = entity.position._value;
      this.list.map((res, index) => {
        if (res.nest_code === entity.id) {
          this.currentNest = res;
          console.log("resNest", res);
          this.getNestState();
        }
      });
      htmlOverlay2.style.display = "block";
      var a = document.getElementById("nestVideo");
      var that = this;
      if (!a) {
        setTimeout(function () {
          that.initPlayer();
        }, 1000);
      } else {
        that.initPlayer();
      }
    },

    getNestState() {
      // 切换socket的机场
      let that = this;
      let nestCode = that.currentNest.nest_code;
      var neststates = that.$store.getters.nestStateList;
      console.log("neststates", neststates);
      Object.keys(neststates).map((item) => {
        // 生成areaName
        for (let i = 0; i < neststates[item].list.length; i++) {
          if (neststates[item].list[i].nest_code == nestCode) {
            that.NestInfo = neststates[item].list[i];
            that.NestInfo.state = item;
            break;
          }
        }
      });
      // that.NestInfo = {};
      // if (KBSocket?.io?.connected) {
      //   KBSocket.io.emit("changeTarget", {
      //     targets: [nestCode],
      //   });
      //   KBSocket.io.emit("registerListener", {
      //     topics: ["nest_info"],
      //     targets: [nestCode],
      //   });
      // }
      // // 机巢信息
      // KBSocket.io.on("nest_info", function (res) {
      //   console.log("socket nest_info", res);
      //   if (res.nest_code !== nestCode) {
      //     return false;
      //   }
      //   // 机槽信息
      //   if (res instanceof Object) that.NestInfo = res;
      // });
    },
    closeNestWindow() {
      if (this.player) {
        this.releasePlayer();
      }
      if (this.intervalTask) {
        clearInterval(this.intervalTask);
        this.intervalTask = null;
      }
      var htmlOverlay2 = document.getElementById("small_window");
      htmlOverlay2.style.display = "none";
    },
    fetchData() {
      // 权限机槽列表
      let that = this;
      getDeptNestList({ dept_id: that.$store.getters.deptId }).then(
        (response) => {
          if (response.error_code === 0) {
            console.log(response);
            if (!response.data) {
              that.$message({
                message: "没有授权机巢或机巢授权已到期",
                type: "error",
                duration: 0,
              });
              that.$bus.emit("CloseLoading", "");
              setTimeout(function () {
                that.$store.dispatch("user/logout");
                if (localStorage.getItem("isShowTitleText")) {
                  that.$router.push({
                    path: "/login",
                    query: { agent: "0001" },
                  });
                } else {
                  that.$router.push(`/login`);
                }
              }, 2000);
            }
            that.list = [];
            response.data.forEach((nest) => {
              that.list.push(nest.nest_info);
            });
            that.$store.commit("SAVE_NEST_LIST", that.list);

            console.log("nest", that.list);
            that.list.map((res, index) => {
              if (!res.position?.longitude) {
                console.log("nest noLng", res);
                return;
              }
              if (!res.position?.latitude) {
                console.log("nest noLat", res);
                return;
              }
              if (res.status != -1) {
                let nest = res;
                var mark = {
                  id: nest.nest_code,
                  name: nest.nest_name,
                  type: "nest",
                  longitude: nest.position.longitude,
                  latitude: nest.position.latitude,
                  height: nest.position.altitude,
                  scale: 0.9,
                  pixelOffset: [0.0, -10.0],
                  distanceShow: [100, 4000000],
                  icon: require("@/assets/nest3.png"),
                };
                CesiumUtil.AddMark(mark, NestLayer);
                var radiu = nest.nest_radius ? nest.nest_radius : 3000;

                let ellipsePosition = Cesium.Cartesian3.fromDegrees(
                  nest.position.longitude,
                  nest.position.latitude,
                  nest.position.altitude || 10
                );
                var ellipseOption = {
                  id: nest.nest_code + "_epllise",
                  name: nest.nest_name,
                  type: "epllise",
                  radius: radiu,
                  color: "rgba(170, 255, 255, 0.15)",
                  colorAlpha: 0.3,
                  outline_color: "rgba(0, 255, 255, 0)",
                  distanceShow: [15000, 300000],
                };
                CesiumUtil.drawEllipse(
                  ellipsePosition,
                  NestLayer,
                  ellipseOption
                );

                var eplliseOulineOption = {
                  id: nest.nest_code + "_epllise_ouline",
                  name: nest.nest_name,
                  height: nest.position.altitude + 10 || 100,
                  type: "epllise_ouline",
                  radius: radiu,
                  color: "rgba(170, 255, 255, 0)",
                  colorAlpha: 0,
                  outline_color: "rgba(0, 255, 255, 1)",
                  distanceShow: [100, 15000],
                };
                CesiumUtil.drawEllipse(
                  ellipsePosition,
                  NestLayer,
                  eplliseOulineOption
                );
              }
            });

            let option = this.$store.getters.kanBanConfig?.option || [];

            let inspectionArea = option.find((feature) => {
              return feature.feature === "inspection_area";
            });
            let show = !!inspectionArea ? !!inspectionArea.isSelect : false;
            this.$bus.emit("toggleNestLayer", show);

            // 普通权限视角锁定到对应机巢 => 管理员账号已移除，userinfo["permissions"].indexOf("ROOT")不再使用，想显示全部机巢需要配置
            if (viewer && NestLayer) {
              viewer.flyTo(NestLayer);
            } else {
              CesiumUtil.FlyToElementByGPS({
                longitude: 118.7,
                latitude: 28.74,
                height: 10,
                distance: 175000,
              });
            }
          }
        }
      );
    },
    ResetView() {
      if (viewer && NestLayer) {
        viewer.flyTo(NestLayer);
      } else {
        CesiumUtil.FlyToElementByGPS({
          longitude: 118.7,
          latitude: 28.74,
          height: 10,
          distance: 175000,
        });
      }
    },
    fullScreen(event) {
      if (this.fullScreenComp !== 0 && this.fullScreenComp !== 4) {
        this.$bus.emit("change_full_screen", 0);
        if (event) {
          event.stopPropagation();
        }
      }
    },
    releasePlayer() {
      if (this.player && this.playerType === 2) {
        this.player.dispose();
        this.player = null;
      } else if (this.player && this.playerType === 1) {
        this.player.release();
        this.player = null;
      } else if (this.player && this.playerType === 4) {
        if (!this.player) return;
        console.log("releasePlayer JPro播放器");
        this.player.destroy();
        this.player = null;
      }
    },
    initPlayer() {
      this.releasePlayer();
      this.initJProPlayer(this.currentNest["nest_video_url"]);
      // this.player = new QNRTPlayer();
      // // 2. 初始化配置信息
      // this.player.init({
      //   volumn: 0,
      // });
      // this.playerType = 1;
      // // 3. 传入播放地址及容器，开始播放
      // this.player.play(
      //   this.getQnUrl(this.currentNest["nest_video_url"]),
      //   document.getElementById("nestVideo")
      // );
      // this.player.on("error", (e) => {
      //   console.log("initQnPlayer error", e);
      //   if (e["code"] !== 20007) {
      //     this.player.release();
      //     this.player = null;
      //     this.initAliPlayer();
      //   } else {
      //     // this.$message.info('网络故障，视频重新连接中...')
      //     this.player.play(src, document.getElementById(this.getPlayerId));
      //   }
      // });
    },
    initJProPlayer(url) {
      if (this.player) {
        this.releasePlayer();
      }
      console.log("JPro播放器");
      this.playerType = 4;
      var options = {};
      this.player = new window.JessibucaPro(
        Object.assign(
          {
            decoder: "/js/jessibuca/decoder-pro.js",
            container: document.getElementById("nestVideo"),
            videoBuffer: 0.2, // 缓存时长
            isResize: false,
            useWCS: false,
            useMSE: true,
            useSIMD: false,
            text: "",
            loadingText: "疯狂加载中...",
            debug: false,
            supportDblclickFullscreen: true,
            showBandwidth: false, // 显示网速
            operateBtns: {
              fullscreen: false,
              screenshot: false,
              play: false,
              audio: false,
            },
            forceNoOffscreen: false,
            isNotMute: true,
            timeout: 10,
          },
          options
        )
      );
      this.player.play(url);
    },
    //
    initAliPlayer() {
      if (this.player) {
        this.player.dispose();
        this.player = null;
      }
      this.playerType = 2;
      const that = this;
      this.player = new Aliplayer({
        id: "nestVideo",
        // source: this.getArtcUrl(this.currentNest["nest_video_url"]), // 播放地址，可以是第三方直播地址，或阿里云直播服务中的拉流地址。
        source: this.currentNest["nest_video_url"],
        // rtsFallbackSource: this.currentNest["nest_video_url"],
        isLive: true, // 是否为直播播放。
        autoplay: true,
        preload: true,
        // useH5Prism: true,
        // showBuffer: false,
        controlBarVisibility: "never",
        // flvFrameChasing: true,
        liveRetry: 1,
      });
      that.initEvent();
      that.initIntervalTask();
    },
    getQnUrl(url) {
      console.log("原视频地址:", url);
      let src = url.replace("http://", "webrtc://");
      src = src.replace("https://", "webrtc://");
      // 地址转换 区分http 和https
      if (location.protocol === "http:") {
        src = src.replace("447", "1240");
      } else if (location.protocol === "https:") {
        src = src.replace("1240", "447");
      }
      src = src.slice(0, src.length - 4);
      console.log("七牛视频地址:", src);
      return src;
    },
    getArtcUrl(url) {
      let src = url.replace("http://", "artc://");
      src = src.replace("https://", "artc://");
      src = src.slice(0, src.length - 4);
      console.log("阿里超低延时视频流地址：", src);
      return src;
    },
    initEvent() {
      this.player.on("play", () => {
        if (this.needRefresh()) {
          this.initAliPlayer();
        }
      });
      this.player.on("pause", () => {});
      this.player.on("error", () => {
        this.player.dispose();
      });
    },
    initIntervalTask() {
      if (this.intervalTask) {
        clearInterval(this.intervalTask);
        this.intervalTask = null;
      }
      this.intervalTask = setInterval(() => {
        if (this.needRefresh()) {
          this.player.seek(this.player.getBuffered().end(0) - 0.2);
        }
      }, 10 * 1000);
    },
    needRefresh() {
      try {
        const differTime =
          this.player.buffered.end(0) - this.player.getCurrentTime();
        return differTime > 2;
      } catch (e) {
        return false;
      }
      // if (this.player === null) return false
      // if (typeof (this.player.buffered) === 'undefined') return false
      // if (this.player.buffered.length === 0) return false
      // if (!this.player.buffered.end(0)) return false
      // const differTime = this.player.buffered.end(0) - this.player.getCurrentTime()
      // return differTime > 2
    },

    // 全景模块 鼠标 移动到 小地图上
    krpanoPanoramaEnter() {
      if (this.fullScreenComp === 4) {
        this.$refs.wrap_ref.style.width = "400px";
        this.$refs.wrap_ref.style.height = "200px";

        this.$bus.emit("closePanoramaText", true);
      }
    },
    // 全景模块 鼠标 移出 小地图上
    krpanoPanoramaLeave() {
      if (this.fullScreenComp === 4) {
        this.$refs.wrap_ref.style.width = "200px";
        this.$refs.wrap_ref.style.height = "100px";

        this.$bus.emit("closePanoramaText", false);
      }
    },
    // 关闭全景
    closePanoramaButton() {
      console.log("关闭全景按钮");
      localStorage.setItem("issEye", true);
      localStorage.setItem("qjEye", true);

      this.closePanorama();
    },
    closePanorama() {
      this.$refs.wrap_ref.style.width = "";
      this.$refs.wrap_ref.style.height = "";
      // 地图全屏显示
      this.$parent.fullScreenComp = 0;
      this.$bus.emit("toggleNestLayer", true); // bottomkanban
      this.$bus.emit("toggleIssueLayer", true); // bottomkanban
      this.$bus.emit("getQjMark");

      // if(lastQjMark){
      //   lastQjMark.primitive.scale = 0.8
      //   lastQjMark.primitive.image = require('@/assets/icons/quanjing.png')
      //   lastQjMark = null
      // }
      this.$parent.closeQj();
    },
    // getBtnClass() {
    //   switch (this.fullScreenComp) {
    //     case 1:
    //       return this.isShowAircraftComp ? 'replace_nest_video' : 'replace_nest_video2'
    //     case 2:
    //       return this.isShowAircraftComp ? 'replace_aircraft_video' : 'replace_aircraft_video2'
    //     case 3:
    //       return this.isShowAircraftComp ? 'replace_nest_inside_video' : 'replace_nest_inside_video2'
    //   }
    // },
    hideScreen() {
      this.hideMap = true;
      // this.$refs.wrap_ref.style.width = '1px'
      // this.$refs.wrap_ref.style.height = '1px'
    },
    showScreen() {
      this.hideMap = false;
      // this.$refs.wrap_ref.style.width = '360px'
      // this.$refs.wrap_ref.style.height = '200px'
    },
  },
  watch: {
    fullScreenComp(newVal) {
      if (newVal === 0) {
        this.hideMap = false;
      }
    },
  },
  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    if (viewer) {
      if (!viewer.isDestroyed()) {
        viewer.dataSources.removeAll(true);
        viewer.destroy();
        console.log("地图销毁了");
      }
      viewer = null;
      console.log("地图null了");
    }

    this.$bus.$off();
  },
};

export default EarthComp;
</script>
<style type="text/css" lang="scss" scoped>
.icon_map {
  pointer-events: all;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
}

::v-deep .prism-big-play-btn {
  display: none !important;
}

::v-deep .prism-ErrorMessage {
  display: none !important;
}

::v-deep .loading-center {
  visibility: hidden;
}

.replace_aircraft_video {
  position: absolute;
  bottom: 30px;
  right: 360px;
  width: 320px;
  height: 200px;
  z-index: 1999;
  background-color: red;
}

.replace_aircraft_video2 {
  position: absolute;
  bottom: 30px;
  right: 20px;
  width: 320px;
  height: 200px;
  z-index: 1999;
  background-color: red;
}

.replace_nest_video {
  position: absolute;
  bottom: 240px;
  right: 360px;
  width: 320px;
  height: 200px;
  z-index: 1999;
  background-color: red;
}

.replace_nest_video2 {
  position: absolute;
  bottom: 240px;
  right: 20px;
  width: 320px;
  height: 200px;
  z-index: 1999;
  background-color: red;
}

.replace_nest_inside_video {
  position: absolute;
  bottom: 450px;
  right: 360px;
  width: 320px;
  height: 200px;
  z-index: 1999;
  background-color: red;
}

.replace_nest_inside_video2 {
  position: absolute;
  bottom: 450px;
  right: 20px;
  width: 320px;
  height: 200px;
  z-index: 1999;
  background-color: red;
}

.wrap_full {
  width: 100%;
  height: 100%;
  left: 0%;
  bottom: 0%;
  z-index: 1;
}

.hide_map {
  width: 1px;
  height: 1px;
}

.krpanoPanorama {
  transition: all 0.25s ease-in 0s;
  position: absolute;
  bottom: 50px;
  left: 20%;
  width: 200px;
  height: 100px;
  z-index: 1999;
  // background-color: skyblue;
}

.closePanorama {
  position: absolute;
  bottom: 0;
  text-align: center;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  width: 100%;
  background-color: #00000050;
  cursor: pointer;
}

.qjlist {
  position: absolute;
  color: aliceblue;
  text-align: left;
  width: 130px;
  font-size: 13px;
  z-index: 99;
  display: none;
  font-family: inherit;
  overflow: hidden;
  border-radius: 2px;
  padding-top: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.qjlist .box {
  background-color: rgba(22, 22, 22, 0.8);
  width: 100%;
  height: 24px;
  line-height: 20px;
  cursor: pointer;
  padding: 1px 10px;
  border-bottom: 1px solid #939393;
}

.qjlist .box:hover {
  background-color: rgba(94, 93, 93, 0.8);
}

.issueInfotips {
  position: fixed;
  width: 300px;
  height: auto;
  background: rgba(255, 255, 255, 0.75);
  color: #333333;
  border-radius: 10px;
  padding: 10px 10px;
  text-align: initial;
  font-size: 14px;

  .issueInfotipsBox {
    position: relative;
    height: 100%;

    .issue_title {
      font-size: 15px;
      line-height: 20px;
      color: #000000;
      font-weight: 700;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      height: 40px;
    }

    .content {
      max-height: 100px;
      overflow-y: auto;
      border-top: 1px solid #fafafa;
      border-bottom: 1px solid #fafafa;

      .box {
        display: flex;
        line-height: 25px;
        overflow-y: auto;
        justify-content: space-between;
        cursor: pointer;

        &:hover {
          background-color: rgba(224, 246, 247, 0.8);
        }
      }
    }

    .content2 {
      display: flex;
      line-height: 25px;
      justify-content: space-between;
    }

    .box {
      cursor: pointer;
      line-height: 20px;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      div {
        border: 1px solid #00aaff;
        border-radius: 8px;
        margin-right: 16px;
        padding: 4px 8px;

        &:hover {
          background-color: rgba(224, 246, 247, 0.8);
        }
      }
    }

    .arrowpoint {
      position: absolute;
      bottom: -35px;
      right: 100px;
      border-left: 20px solid transparent;
      border-bottom: 0px solid transparent;
      border-top: 25px solid rgba(255, 255, 255, 0.75);
      border-right: 30px solid transparent;
    }

    .closeissueInfotipsBox {
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 18px;
      cursor: pointer;

      i {
        font-weight: bold;
      }
    }
  }
}

.nest-pop {
  position: absolute;
  z-index: 99;
  width: 350px;
  height: 360px;
  border: 1px solid rgba(28, 193, 255, 0.6);
  padding: 10px;
  box-sizing: border-box;
  background: rgba(5, 29, 40, 0.6);
  user-select: none;
  transition: 0.2s linear;
  display: none;

  ::v-deep video {
    object-fit: fill !important;
  }
}

.nest-pop.summary {
  width: 200px;
  height: auto;
}

.nest-pop:before {
  border-top: 20px solid rgba(28, 193, 255, 0.8);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
}

.nest-pop:after {
  border-bottom: 10px solid rgba(28, 193, 255, 0.8);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
}

.nest-pop .pop-inner-video {
  width: 100%;
  height: 200px;
}

.pop-inner {
  border: 1px solid rgba(28, 193, 255, 0.4);
  padding: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(5, 29, 40, 0.8);
}

.pop-inner-close {
  position: absolute;
  right: 0.1rem;
  top: 0.08rem;
  font-size: 12px;
  color: white;
  font-weight: 100;
  cursor: pointer;
  transition: 0.1s linear;
}

.pop-inner-close:before {
  content: "\2716";
}

.pop-inner-title {
  position: relative;
  height: 40px;
  margin: 0 5px;
  font-size: 15px;
  color: #fff;
  align-items: center;
  line-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pop-inner-title span {
  margin-left: 10px;
}

.pop-inner-title:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 3px;
  height: 20px;
  background: #fff;
}

.pop-inner-info {
  height: 64px;
  margin: 8px;
  display: flex;
  flex-wrap: wrap;
  font-weight: 300;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.8);
}

.pop-inner-info .info-item {
  width: 50%;
  height: 32px;
  height: 24px;
  display: flex;
  align-items: center;
}

.pop-inner-btn {
  height: 30px;
  line-height: 30px;
  text-align: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.1s linear;
  color: rgba(28, 193, 255, 0.8);
  background-color: rgba(28, 193, 255, 0.2);
}
</style>
<style>
::-webkit-scrollbar {
  width: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
